<template>
	<div>
		<!--房间属性-->
		<div v-if="value1.type === 'relatedSystem'">
			<div class="flex-com mar-btm">
				<span class="label-title">属性值</span>
				<el-input
					v-if="value1.room === 'curGroupCmd'"
					v-model="ruleForm.value"
					size="mini" placeholder="属性值"
					class="width-input"
					@blur="roomChange(ruleForm)"></el-input>
				<el-select
					v-else
					v-model="ruleForm.value" size="mini"
					placeholder="属性值" class="width-input"
					@change="roomChange(ruleForm)">
					<el-option
						v-for="(item, index) in roomOption" :key="index"
						:label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
		</div>
		<!--设备状态-->
		<div v-if="value1.type === 'relatedDeviceStatus'">
			<div class="flex-com mar-btm">
				<span class="label-title">属性值</span>
				<el-select
					v-if="getParamsList(paramsList, value1.params).length > 0"
					v-model="ruleForm.value" size="mini"
					placeholder="输入值" class="width-input">
					<el-option
						v-for="(item, index) in getParamsList(paramsList, value1.params)" :key="index"
						:label="item.alias" :value="item.key"></el-option>
				</el-select>
        <!--<el-input v-else v-model="ruleForm.value" placeholder="输入值" size="mini" class="width-input"></el-input>-->
        <InputsComponent :inputsObject="ruleForm" v-else></InputsComponent>
			</div>
		</div>
		<!--组件变量-->
		<div v-if="value1.type === 'relatedAtomic'">
			<!--组件显隐-->
			<div v-if="value1.atomicPorts === 'visible'" class="flex-com mar-btm">
				<span class="label-title">属性值</span>
				<el-select
					v-model="ruleForm.value" size="mini"
					placeholder="值绑定" class="width-input"
					@change="stateEvent(ruleForm)">
					<el-option
						v-for="(item, index) in roomOption" :key="index"
						:label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<!--组件状态-->
			<div v-else-if="value1.atomicPorts === 'state'" class="flex-com mar-btm">
				<span class="label-title">属性值</span>
				<el-select
					v-model="ruleForm.value" size="mini"
					placeholder="状态" class="width-input"
					@change="stateEvent(ruleForm)">
					<el-option
						v-for="(item, index) in getAtomicAttr(value1.atomic, 'states')" :key="index"
						:label="item.stateName" :value="item.id"></el-option>
				</el-select>
			</div>
			<div v-else>
				<SelectVariable
					:action="ruleForm"
					:stateLogic="true"
					@showPicker="showPicker"
					@changeState="toAtomicEvent"></SelectVariable>
			</div>
		</div>
		<!--全局变量-->
		<div v-if="value1.type === 'relatedGlobal'">
			<SelectVariable
				:action="ruleForm"
				:stateLogic="true"
				@showPicker="showPicker"
				@changeState="toAtomicEvent"></SelectVariable>
		</div>
	</div>
</template>
<script>
	import SelectVariable from "./SelectVariable.vue";
	import {getAtomicAttr, findDeviceCommands, generateUID} from "@/utils";
	import {mapActions, mapState} from "vuex";
  import InputsComponent from "./InputsComponent.vue";
	export default {
		name: 'IftttFiledOption',
		components: {SelectVariable,InputsComponent},
		props: {
			ruleForm: {
				type: Object,
				default: () => {
					return {};
				},
			},
			value1: {
				type: Object,
				default: () => {
					return {};
				},
			}
		},
		created() {
			this.getParams(this.value1.command);
		},
		data() {
			return {
				currentWidgetId: "",
				curPickerId: '',
				currentAction: {},
				currentAtomic: '',
				paramsList: {},
				getAtomicAttr: getAtomicAttr,
				findDeviceCommands: findDeviceCommands,
			};
		},
		computed: {
			...mapState({
				globalDeviceList: state => state.ide.globalDeviceList,
				widgetPickerInfo: state => state.ide.widgetPickerInfo,
			}),
			deviceList() {
				//组合自定义命令和设备命令到一个组
				return this.globalDeviceList.map(device => device);
			},
			roomOption() {
				if (this.value1.room === 'occupied' || this.value1.room === 'systemOn' || this.value1.atomicPorts === 'visible') {
					return [
						{label: '是', value: true},
						{label: '否', value: false}
					];
				} else {
					return [
						{label: '开启共享', value: 'on'},
						{label: '取消共享', value: 'off'}
					];
				}
			},
		},
		watch: {
			'widgetPickerInfo.selectWidgetId': {
				handler(selectWidgetId) {
					if (!selectWidgetId) return;
					const {pickerId = ''} = this.widgetPickerInfo;
					if (this.curPickerId !== pickerId) return;
					if (this.currentWidgetId === selectWidgetId) return;
					if (this.currentAtomic === 'toAtomic') {
						this.$set(this.currentAction, 'toAtomic', selectWidgetId);
					} else {
						this.currentAction.atomic = selectWidgetId;
					}
					this.$forceUpdate();
				}
			},
      'value1.command': {
        //编辑规则的时候回显参数
        handler(command) {
        this.getParams(command);
      }
      }
		},
		methods: {
			...mapActions(['updateWidgetPickerInfo']),
			//回显paramsList
			getParams(val) {
				const commandList = this.findDeviceCommands(this.value1.controlId) || [];
				this.paramsList = commandList.find(item => item.methodName === val) || {};
			},
			//获取参数枚举
			getParamsList(paramsList, paramKey) {
				if (!paramsList) return [];
				const {params = []} = paramsList;
				const {enumList = []} = params.find(item => item.paramKey === paramKey) || {};
				return enumList;
			},
			showPicker(action) {
				this.currentAction = action[0];
				this.currentAtomic = action[1];
				this.currentWidgetId = action[1] === 'toAtomic' ? action[0].toAtomic : action[0].atomic;
				this.curPickerId = generateUID();
				this.updateWidgetPickerInfo({
					show: true,
					pickerId: this.curPickerId,
					selectWidgetId: this.currentWidgetId
				});
			},
			/***修改组件 */
			stateEvent(action) {
				action.name = this.value1.name;
				action.key = this.value1.key;
				action.type = this.transformType(this.value1);
			},
			toAtomicEvent(action) {
				action.name = this.value1.name;
				action.key = this.value1.key;
				action.type = this.transformType(this.ruleForm);
			},
			transformType(action) {
				let type;
				type = action.autoType === 2 ? "relatedGlobal" : type = action.autoType === 1 ? "relatedAtomic" : type = action.atomicPorts === "state" ? "int" : type = action.atomicPorts === "visible" ? "bool" : "string";
				return type;
			},
			//房间的属性改变
			roomChange(action) {
				action.name = this.value1.name;
				action.key = this.value1.key;
				action.type = this.roomTransform();
			},
			roomTransform() {
				return ['occupied', 'systemOn'].includes(this.value1.room) ? 'bool' : 'string';
			}
		}
	}
</script>
<style lang="less" scoped>
	.flex-com {
		display: flex;
		align-items: center;
		gap: 10px;
	}


	.label-title {
		min-width: 60px;
		color: @colorGray10;
		font-size: 14px;
		text-align: center;
		flex-shrink: 0;
	}

	.width-input {
		width: 350px;

		/deep/ .el-input__inner {
			width: 100%;
		}
	}
</style>
